<template>
	<view class="">
		<view class="center">
			<view class="title">
				购物车(5)
			</view>
		</view>
		<view class="center">
			<view class="comm" v-for="(item,index) in list" :key="index">
				<view class="comm_opt">
					<checkbox-group >
						<label>
							<checkbox @click="ckeck(item)" activeBorderColor="#ff5a00" activeBackgroundColor="#ff5a00" iconColor="#ffff"
								:checked="item.isCheck" />
						</label>
					</checkbox-group>
				</view>
				<view class="comm_img">
					<image :src="item.imageUrl" mode=""></image>
				</view>
				<view class="comm_content">
					<view class="comm_content_head">
						{{item.bookTitle}}
					</view>
					<view class="comm_contentd_condition">
						{{item.faceGradeStr}}
					</view>
					<view class="comm_contentd_num">
						X{{item.quantity}}
					</view>
					<view class="comm_contentd_price">
						￥{{item.sellPriceStr}}
					</view>
				</view>
			</view>
		</view>
		<view class="center">
			<view class="discounts">
				<view class="discounts_left">
					领券全场满100元立减8元
				</view>
				<view class="discounts_right">
					已领取，去下单吧~
				</view>
			</view>
		</view>
		<view class="center">
			<view class="close">
				<view class="close_num">
					<view class="">
						</checkbox-group>
						<checkbox-group >
							<label>
								<checkbox @click="qxckeck" activeBackgroundColor="#ff5a00" iconColor="#ffff" value="cb" :checked="qxcd" />
							</label>
						</checkbox-group>
					</view>
					<view class="">
						已选4本
					</view>
				</view>
				<view class="clos_price">
					<view class="total_comput">
						<view class="clos_total_price">
							总计 {{zj}}
						</view>
						<view class="close_dis">
							商品金额满49元邮费减5元
						</view>
					</view>
					<view class="but">
						下一步
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: {},
				qxcd:false,
				zj:0,
				length:0
			}
		},
		onPullDownRefresh() {
			this.getList()
			this.$mess.success('刷新成功')
			uni.stopPullDownRefresh()
		},
		onLoad() {
			this.getList()
		},
		methods: {
			ckeck(val){
				if(val.isCheck= !val.isCheck){
					this.zj+= Number(val.sellPriceStr)
				}else{
					this.zj=this.zj- Number(val.sellPriceStr)
					this.leng()
				}
				// console.log(list.isCheck);
				// console.log(list);
				// this.zj = list.isCheck === true ? this.zj+= Number(list.sellPriceStr):0
				// val.detail.value[0] =  Boolean(val.detail.value[0]) 
				// val.detail.value[0]==true? 
			},
			qxckeck(){
				this.qxcd=!this.qxcd
				this.list.map(item=>{
					item.isCheck=this.qxcd
					return item
				})
			},	
			async getList() {
				let res = await new Promise((ok, no) => {
					uni.request({
						url: "http://m.jxsjs.com/api/order-cart",
						success(val) {
							uni.hideLoading()
							ok(val)
						}
					})
				})
				res.data.data.itemList.map(item=> {
					item.isCheck=false
					return item
				})
				this.list = res.data.data.itemList
			}
		},
	}
</script>

<style lang="less">
	@import url('index.less');
	/deep/uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked{
		border-radius: 50%;
	}
</style>